new Vue({
    el: '#app',
    data: {
        loading: false,//控制网络请求的加载参数
        tableData: [],//列表数据源
        queryData: {//查询数据源
            name:'',
            level:'',//会员等级
            rebateType:'',//佣金等级
            pageNum: 1,
            pageSize: 10,
        },
        count: 0,//查询总数
        dialogVisible:false,//控制详情dialog的显示/隐藏
        tagList:[],//标签列表数据源
        levelList:[],//会员等级列表数据源
        rebateList:[],//佣金等级列表数据源
        detailInfo:null,//客户详情数据源
        customerTagsList:[],//客户的标签列表数据源
        dialogVisible2:false,////控制标签列表dialog的显示/隐藏
        ids:[],//客户当前设置的标签 id


    },
    created() {
        this.getList();//加载客户列表
        this.getLevelList();//加载会员等级列表
        this.getRebateList();//加载佣金等级列表

    },
    methods: {
        //查看详情按钮
        onDetail(row){
            this.getDetailInfo(row.id);
            this.getCustomerTagsList(row.id);


        },
        //修改客户标签按钮
        updateCustomerTags(){
            this.getTagList()
        },
        //确认 修改客户详情按钮
        onSure() {
            this.update()
        },
        //确认 修改客户标签按钮
        onSure2(){
            this.dialogVisible2 = false
            this.saveTags()
            console.log(this.ids)

        },
        // 保存 客户标签接口
        saveTags() {
            $.ajax({
                type: 'post',
                url: '/customer/saveTags',
                data: {
                    id:this.detailInfo.id,
                    tags:this.ids,
                },
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success('修改成功！')
                        this.dialogVisible2 = false
                        this.getCustomerTagsList(this.detailInfo.id);
                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }

                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    return false;
                }
            });
        },
        // 更新 客户详情接口
        update() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/customer/update',
                data: {
                    id:this.detailInfo.id,
                    remark:this.detailInfo.remark,
                    level:this.detailInfo.level,
                    rebateType:this.detailInfo.rebateType,
                },
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success('修改成功！')
                        this.dialogVisible = false
                        this.getList();
                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }

                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },

        handleCurrentChange(val) {
            this.queryData.page = val
            this.getList()
        },

        handleSizeChange(val) {
            this.queryData.page = 1
            this.queryData.limit = val
            this.getList()
        },
        //获取客户列表接口
        getList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/customer/list',
                data: this.queryData,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.tableData = res.data.items
                        this.count = res.data.itemsTotalCount

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取会员列表接口
        getLevelList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/level/list',
                data: {},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.levelList = res.data

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取佣金等级列表 接口
        getRebateList(){
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/rebate/list',
                data: {},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.rebateList = res.data

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取客户对应的 标签列表接口
        getCustomerTagsList(id){
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/customerTags/list',
                data: {id:id},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.customerTagsList = res.data
                        this.ids = []
                        this.customerTagsList.forEach((item)=>{
                            this.ids.push(item.tagId)
                        })


                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取 标签列表，全部不分页
        getTagList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/tags/all',
                data: {},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.tagList = res.data
                        console.log(this.ids)
                        this.dialogVisible2 = true

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取客户详情接口
        getDetailInfo(id){
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/customer/info',
                data: {id:id},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.dialogVisible = true
                        this.detailInfo = res.data

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
    }
})
